<template>
  <div>
    <!--添加-->
    <el-form inline>
      <el-form-item>
        <el-button
          type="primary"
          size="small"
          icon="el-icon-plus"
          @click="addDialogVisible = true"
          >添加友链</el-button
        >
      </el-form-item>
      <el-form-item style="margin-left: 20px">
        <el-switch
          v-model="infoForm.commentEnabled"
          :active-value="1"
          :inactive-value="0"
          active-text="页面评论"
          @change="commentEnabledChanged"
        ></el-switch>
      </el-form-item>
    </el-form>

    <el-table :data="friendList">
      <el-table-column label="序号" type="index" width="50"></el-table-column>
      <el-table-column label="头像" width="80">
        <template v-slot="scope">
          <el-avatar
            shape="square"
            :size="50"
            fit="contain"
            :src="scope.row.avatar"
          ></el-avatar>
        </template>
      </el-table-column>
      <el-table-column label="昵称" prop="nickname"></el-table-column>
      <el-table-column label="描述" prop="description"></el-table-column>
      <el-table-column label="站点" prop="website"></el-table-column>
      <el-table-column label="是否公开" width="100">
        <template v-slot="scope">
          <el-switch
            v-model="scope.row.isPublished"
            :active-value="1"
            :inactive-value="0"
            @change="friendPublishedChanged(scope.row)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column
        label="浏览次数"
        prop="views"
        width="100"
      ></el-table-column>
      <el-table-column label="创建时间" width="170">
        <template v-slot="scope">{{
          scope.row.createTime | dateFormat
        }}</template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template v-slot="scope">
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="mini"
            @click="showEditDialog(scope.row)"
            >编辑</el-button
          >
          <el-popconfirm
            title="确定删除吗？"
            icon="el-icon-delete"
            iconColor="red"
            @onConfirm="deleteFriendById(scope.row.id)"
          >
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              slot="reference"
              >删除</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!--分页-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pageNum"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="queryInfo.pageSize"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper"
      background
    >
    </el-pagination>

    <!--友链页面信息-->
    <el-form label-position="top">
      <el-form-item label="友链页面信息">
        <mavon-editor v-model="infoForm.content" />
      </el-form-item>
      <el-form-item style="text-align: right">
        <el-button type="primary" icon="el-icon-check" @click="updateContent"
          >保存</el-button
        >
      </el-form-item>
    </el-form>

    <!--添加友链对话框-->
    <el-dialog
      title="添加友链"
      width="40%"
      :visible.sync="addDialogVisible"
      :close-on-click-modal="false"
      @close="addDialogClosed"
    >
      <!--内容主体-->
      <el-form
        :model="addForm"
        :rules="formRules"
        ref="addFormRef"
        label-width="80px"
      >
        <el-form-item label="昵称" prop="nickname">
          <el-input v-model="addForm.nickname"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input v-model="addForm.description"></el-input>
        </el-form-item>
        <el-form-item label="网站" prop="website">
          <el-input v-model="addForm.website"></el-input>
        </el-form-item>
        <el-form-item label="头像URL" prop="avatar">
          <el-input v-model="addForm.avatar"></el-input>
        </el-form-item>
        <el-form-item label="是否公开" prop="isPublished">
          <el-switch
            v-model="addForm.isPublished"
            :active-value="1"
            :inactive-value="0"
          ></el-switch>
        </el-form-item>
      </el-form>
      <!--底部-->
      <span slot="footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveFriend">确 定</el-button>
      </span>
    </el-dialog>

    <!--编辑友链对话框-->
    <el-dialog
      title="编辑友链"
      width="40%"
      :visible.sync="editDialogVisible"
      :close-on-click-modal="false"
      @close="editDialogClosed"
    >
      <!--内容主体-->
      <el-form
        :model="editForm"
        :rules="formRules"
        ref="editFormRef"
        label-width="80px"
      >
        <el-form-item label="昵称" prop="nickname">
          <el-input v-model="editForm.nickname"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input v-model="editForm.description"></el-input>
        </el-form-item>
        <el-form-item label="网站" prop="website">
          <el-input v-model="editForm.website"></el-input>
        </el-form-item>
        <el-form-item label="头像URL" prop="avatar">
          <el-input v-model="editForm.avatar"></el-input>
        </el-form-item>
        <el-form-item label="是否公开" prop="isPublished">
          <el-switch
            v-model="editForm.isPublished"
            :active-value="1"
            :inactive-value="0"
          ></el-switch>
        </el-form-item>
      </el-form>
      <!--底部-->
      <span slot="footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editFriend">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb'
import {
  selectByPage,
  findById,
  create,
  update,
  deleteById,
  updatePublished
} from '@/api/friend'
import {
  updateFriendCommentEnabled,
  updateFriendContent,
  list
} from '@/api/siteSetting'
export default {
  name: 'FriendList',
  components: { Breadcrumb },
  data() {
    return {
      infoForm: {
        content: '',
        commentEnabled: 1
      },
      queryInfo: {
        page: {
          page: 1,
          limit: 10
        }
      },
      friendList: [],
      total: 0,
      addDialogVisible: false,
      editDialogVisible: false,
      addForm: {
        nickname: '',
        description: '',
        website: '',
        avatar: '',
        isPublished: 1
      },
      editForm: {
        nickname: '',
        description: '',
        website: '',
        avatar: '',
        isPublished: 1
      },
      formRules: {
        nickname: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
        description: [
          { required: true, message: '请输入描述', trigger: 'blur' }
        ],
        website: [{ required: true, message: '请输入网站', trigger: 'blur' }],
        avatar: [{ required: true, message: '请输入头像URL', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getFriendList()
    this.getInfo()
  },
  methods: {
    getInfo() {
      list().then(res => {
        const data = res.data['friend_info']
        if (data) {
          data.forEach(e => {
            if (e.tagType === 20) {
              this.infoForm.content = e.value
            }
            if (e.tagType === 21) {
              this.infoForm.commentEnabled = Number(e.value)
            }
          })
        }
      })
    },
    updateContent() {
      updateFriendContent(this.infoForm.content).then(res => {
        this.msgSuccess(res.msg)
        this.getInfo()
      })
    },
    commentEnabledChanged() {
      updateFriendCommentEnabled(this.infoForm.commentEnabled).then(res => {
        this.msgSuccess(res.msg)
      })
    },
    getFriendList() {
      selectByPage(this.queryInfo).then(res => {
        this.friendList = res.data.rows
        this.total = res.data.total
      })
    },
    //监听 pageSize 改变事件
    handleSizeChange(newSize) {
      this.queryInfo.page.limit = newSize
      this.getFriendList()
    },
    //监听页码改变的事件
    handleCurrentChange(newPage) {
      this.queryInfo.page.page = newPage
      this.getFriendList()
    },
    friendPublishedChanged(row) {
      updatePublished(row.id, row.isPublished).then(res => {
        this.msgSuccess(res.msg)
      })
    },
    deleteFriendById(id) {
      deleteById(id).then(res => {
        this.getFriendList()
        this.msgSuccess(res.msg)
      })
    },
    showEditDialog(row) {
      this.editForm = { ...row }
      this.editDialogVisible = true
    },
    addDialogClosed() {
      this.$refs.addFormRef.resetFields()
    },
    editDialogClosed() {
      this.editForm = {}
      this.$refs.editFormRef.resetFields()
    },
    saveFriend() {
      this.$refs.addFormRef.validate(valid => {
        if (valid) {
          create(this.addForm).then(res => {
            this.getFriendList()
            this.msgSuccess(res.msg)
            this.addDialogVisible = false
          })
        }
      })
    },
    editFriend() {
      this.$refs.editFormRef.validate(valid => {
        if (valid) {
          update(this.editForm).then(res => {
            this.getFriendList()
            this.msgSuccess(res.msg)
            this.editDialogVisible = false
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.el-button + span {
  margin-left: 10px;
}

.el-form {
  margin-top: 15px !important;
}

.el-form--inline .el-form-item {
  margin-bottom: 0;
}
</style>
